<template>
  <view class="result-container">
    <!-- 结果展示 -->
    <view class="result-card" :class="result.status">
      <image :src="getResultImage()" mode="aspectFit" class="result-icon" />
      <text class="status-text">{{ result.statusText }}</text>
      <text class="desc">{{ result.desc }}</text>
      
      <view class="amount-info">
        <text class="label">支付金额</text>
        <text class="amount">¥{{ result.amount }}</text>
      </view>
    </view>
    
    <!-- 订单信息 -->
    <view class="info-card">
      <view class="info-item">
        <text class="label">医院</text>
        <text class="value">{{ result.hospitalName }}</text>
      </view>
      <view class="info-item">
        <text class="label">就诊人</text>
        <text class="value">{{ result.patientName }}</text>
      </view>
      <view class="info-item">
        <text class="label">订单编号</text>
        <text class="value">{{ result.orderNo }}</text>
      </view>
      <view class="info-item">
        <text class="label">支付方式</text>
        <text class="value">{{ result.paymentMethod }}</text>
      </view>
      <view class="info-item">
        <text class="label">支付时间</text>
        <text class="value">{{ result.payTime }}</text>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <block v-if="result.status === 'success'">
        <button class="action-btn outline" @tap="viewDetail">查看详情</button>
        <button class="action-btn primary" @tap="viewInvoice">查看发票</button>
      </block>
      <block v-else-if="result.status === 'fail'">
        <button class="action-btn outline" @tap="goBack">返回</button>
        <button class="action-btn primary" @tap="retryPay">重新支付</button>
      </block>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 支付结果数据
const result = ref({
  status: 'success', // success-成功 fail-失败
  statusText: '支付成功',
  desc: '您的订单已支付成功',
  amount: 360.00,
  hospitalName: '澳门镜湖医院',
  patientName: '张三',
  orderNo: 'P202403250001',
  paymentMethod: '微信支付',
  payTime: '2024-03-25 09:30:00'
})

// 获取结果图片
const getResultImage = () => {
  return `/static/payment/result-${result.value.status}.png`
}

// 查看详情
const viewDetail = () => {
  uni.redirectTo({
    url: `/pages/payment/detail?id=${result.value.orderNo}`
  })
}

// 查看发票
const viewInvoice = () => {
  uni.navigateTo({
    url: `/pages/payment/invoice?id=${result.value.orderNo}`
  })
}

// 返回
const goBack = () => {
  uni.navigateBack()
}

// 重新支付
const retryPay = () => {
  uni.redirectTo({
    url: `/pages/payment/index?id=${result.value.orderNo}`
  })
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const { status, orderNo } = page.$page?.options || {}
  
  // 加载支付结果
  loadPaymentResult(status, orderNo)
})

// 加载支付结果
const loadPaymentResult = (status, orderNo) => {
  // 这里调用API获取数据
  console.log('加载支付结果:', status, orderNo)
}
</script>

<style lang="scss">
.result-container {
  min-height: 100vh;
  background: $bg-color;
  padding: 40rpx 20rpx;
  
  .result-card {
    background: #fff;
    border-radius: $radius-lg;
    padding: 60rpx 40rpx;
    text-align: center;
    margin-bottom: 30rpx;
    box-shadow: $shadow-sm;
    
    .result-icon {
      width: 160rpx;
      height: 160rpx;
      margin-bottom: 30rpx;
    }
    
    .status-text {
      font-size: 40rpx;
      font-weight: bold;
      margin-bottom: 12rpx;
      display: block;
    }
    
    .desc {
      font-size: 28rpx;
      color: $text-regular;
      margin-bottom: 40rpx;
      display: block;
    }
    
    .amount-info {
      .label {
        font-size: 28rpx;
        color: $text-regular;
        margin-bottom: 12rpx;
        display: block;
      }
      
      .amount {
        font-size: 48rpx;
        font-weight: bold;
      }
    }
    
    &.success {
      .status-text {
        color: $success;
      }
      .amount {
        color: $success;
      }
    }
    
    &.fail {
      .status-text {
        color: $danger;
      }
      .amount {
        color: $danger;
      }
    }
  }
  
  .info-card {
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    margin-bottom: 60rpx;
    box-shadow: $shadow-sm;
    
    .info-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .label {
        font-size: 28rpx;
        color: $text-regular;
      }
      
      .value {
        font-size: 28rpx;
        color: $text-primary;
      }
    }
  }
  
  .bottom-buttons {
    display: flex;
    gap: 20rpx;
    padding: 0 20rpx;
    
    .action-btn {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 30rpx;
      border-radius: $radius-xl;
      
      &.outline {
        color: $primary-color;
        background: #fff;
        border: 2rpx solid $primary-color;
      }
      
      &.primary {
        color: #fff;
        background: $primary-gradient;
      }
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
}
</style> 